<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dijit/themes/claro/claro.css">
	<style type="text/css">@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojo/resources/dojo.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dijit/themes/claro/claro.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid need a explicit width/height by default */
#grid {
    width: 110em;
    height: 30em;
}


</style>
<script>dojoConfig = {parseOnLoad: true}</script>

<script src='http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/dojo.js'></script>

<script>
		dojo.require("dojox.grid.EnhancedGrid");
		dojo.require("dojox.grid.enhanced.plugins.Pagination");
		dojo.require("dojo.data.ItemFileWriteStore");
		
		console.log("locale");
		
		require([
				"dojo/store/JsonRest",
				"dojo/store/Memory",
				"dojo/store/Cache",
				"dojox/grid/EnhancedGrid",
				"dojo/data/ObjectStore",
				"dojo/query",
				"dojo/request", 
				"dojo/json",
				"dijit/form/NumberTextBox",
				"dojo/number",
				"dijit/form/CurrencyTextBox",
				"dojox/grid/cells",
				"dojo/currency",
				"dijit/form/DateTextBox",
				"dojo/date/locale",
				"dijit/form/Button",
				"dijit/registry",
				"dijit/Dialog",
				"dojox/grid/cells/dijit",
				"dojo/domReady!"
			], function(JsonRest, Memory, Cache, EnhancedGrid, ObjectStore, query, request, json, NumberTextBox, number, CurrencyTextBox, cells, currency,
				DateTextBox, locale, Button, registry, Dialog){
				
				console.log("locale");
				
				function getDateValue(){
					return stamp.toISOString(this.widget.get('value'));
				}
				
				function formatDate(inDatum){
					return locale.format(new Date(inDatum), this.constraint);
				}
				
				function formatNumber(inDatum){
					return isNaN(inDatum) ? '...' : number.format(inDatum);
				}
				
				function formatCurrency(inDatum){
					return isNaN(inDatum) ? '...' : currency.format(inDatum, this.constraint);
				}
				
				isButtonClick = false;
				function btnFormatterFacotry(btnName)
				{
					var buttonName = btnName;
					var buttonFormatter =  function(){
						var w = new Button({
							label: buttonName,
							onClick: function(e) {
								isButtonClick = true;
							}
						});
						w._destroyOnRemove=true
						return w;
					};
					return buttonFormatter;
				}
				
				request.get("http://localhost:8083/ticket-manager/product/getall.do", {
					handleAs: "json"
				}).then(function (dataItems){
				
					var data = {
						  identifier: 'id',
						  items: dataItems
						};
						
					var store = new dojo.data.ItemFileWriteStore({data: data});
					
					gridLayout = [{ defaultCell: {editable: true, type: cells._Widget},
					cells: [
						{ name:"Id", field:"id", width: "120px" ,editable: false},
						{ name:"Code", field:"code", width: "120px"},
						{ name:"Name", field:"name", width: "120px"},
						{ name:"Amount", field:"amount", width: "120px", formatter: formatNumber, widgetClass: NumberTextBox},
						{ name:"Price", field:"price", width: "120px", formatter: formatCurrency, constraint: {currency: 'USD'}, widgetClass: CurrencyTextBox},
						{ name:"CreateDate", field:"createDate", width: "120px", formatter: formatDate, widgetClass: DateTextBox ,constraint: {formatLength: 'long', selector: "date"}},
						{ name: 'IsNew', field: 'isNew', styles: 'text-align: center;', type: cells.CheckBox},
						{ name: 'Category', field: 'category', styles: 'text-align: center;', type: cells.Select, options: ["grenn tea", "hat", "car", "book", "ice scream" ]},
						{ name: 'Update', field: 'update', width: 6, editable: false, formatter: btnFormatterFacotry("Update") },
						{ name: 'Update2', field: 'update2', width: 6, editable: false, formatter: btnFormatterFacotry("Update2") },
						{ name: 'Delete', field: 'delete', width: 6, editable: false, formatter: btnFormatterFacotry("Delete") }
					]
				}];
					var grid = new dojox.grid.EnhancedGrid({
						id: 'grid',
						store: store,
						structure: gridLayout,
						rowSelector: '20px' ,
						plugins: {
						   pagination: {
							  pageSizes: ["20", "50", "100", "All"],
							  description: true,
							  sizeSwitch: true,
							  pageStepper: true,
							  gotoButton: true,
							  maxPageStep: 5,
							  position: "bottom"
						  }
						}
					}, document.createElement('div'));
					
			grid.on("RowClick", function(evt){
				if(isButtonClick)
				{
					isButtonClick = false;
					
					var cidx = evt.cellIndex;
					var ridx = evt.rowIndex;
					if(cidx == 8)
					{
						rowData = grid.getItem(ridx);
						//rowData.category[0] = "book";
						updateRowData = rowData;
						registry.byId("terms").show();
						//grid.updateRow(ridx);
					}
					if(cidx == 9)
					{
					
						editRowIndex = ridx;
						rowData = grid.getItem(ridx);
						//rowData.category[0] = "car";
						registry.byId("uf_id").set("value",rowData.id[0]);
						registry.byId("uf_code").set("value",rowData.code[0]);
						registry.byId("uf_name").set("value",rowData.name[0]);
						registry.byId("uf_amount").set("value",rowData.amount[0]);
						registry.byId("uf_price").set("value",rowData.price[0]);
						registry.byId("uf_isNew").set("value",rowData.isNew[0]);
						registry.byId("uf_category").set("value",rowData.category[0]);
						registry.byId("uf_createDate").set("value",rowData.createDate[0]);
						
						registry.byId("updateForm").show();
						
						//grid.updateRow(ridx);
					}
					if(cidx == 10)
					{
						rowData = grid.getItem(ridx);
						deleteRowIndex = ridx;
						deleteItemId = rowData.id[0];
						registry.byId("deleteDialog").show();
					}
				}
			}, true);
			
			dojo.byId("gridDiv").appendChild(grid.domNode);
			
			grid.startup();		
			});
		});
		
		var updateRowData = null;
		function sendUpdateRequest()
		{
			require(["dojo/request" , "dijit/registry",
				"dijit/Dialog" ],function(request, registry, Dialog){
				
				var product = new Object();
				product.id = updateRowData.id[0];
				product.code = updateRowData.code[0];
				product.name = updateRowData.name[0];
				product.amount = updateRowData.amount[0];
				product.price = updateRowData.price[0];
				product.isNew = updateRowData.isNew[0];
				product.category = updateRowData.category[0];
				product.createDate = updateRowData.createDate[0];
				
				
				dojo.xhrPost({
				   url : "http://localhost:8083/ticket-manager/product/update.do",
				   postData: dojo.toJson(product),
				   handleAs: "json",
				   headers : {
						"Content-Type" : "application/json; charset=UTF-8"
				   },
				   load: function(response,ioargs) {
						alert('success');
						hideDialog("terms");
				   },
				   error : function(response,ioargs) {
						alert('error');
						hideDialog("terms");
				   }
				});
				
			});
		}
		
		function updateData()
		{
			console.log("updateData");
			sendUpdateRequest();
		}
		
		function hideDialog()
		{
			require(["dijit/registry",
				"dijit/Dialog",],function(registry, Dialog){
				registry.byId("terms").hide();
			});
		}
		
		function hideFormDialog()
		{
			require(["dijit/registry",
				"dijit/Dialog",],function(registry, Dialog){
				registry.byId("updateForm").hide();
			});
		}
		
		function hideDeleteDialog()
		{
			require(["dijit/registry",
				"dijit/Dialog",],function(registry, Dialog){
				registry.byId("deleteDialog").hide();
			});
		}
		
		var editRowIndex = null;
		function updateFromDateToServer()
		{
			require(["dojo/request" , "dijit/registry",
				"dijit/Dialog" ],function(request, registry, Dialog){
				
				var product = new Object();
			
				product.id = registry.byId("uf_id").get("value");
				product.code = registry.byId("uf_code").get("value");
				product.name = registry.byId("uf_name").get("value");
				product.amount = registry.byId("uf_amount").get("value");
				product.price = registry.byId("uf_price").get("value");
				product.isNew = registry.byId("uf_isNew").get("value") == "on" ? true : false;
				product.category = registry.byId("uf_category").get("value");
				product.createDate = registry.byId("uf_createDate").get("value");
				
				
				dojo.xhrPost({
				   url : "http://localhost:8083/ticket-manager/product/update.do",
				   postData: dojo.toJson(product),
				   handleAs: "json",
				   headers : {
						"Content-Type" : "application/json; charset=UTF-8"
				   },
				   load: function(response, ioargs) {
						alert('success');
						hideFormDialog();
				   },
				   error : function(response, ioargs) {
						alert('error');
						hideFormDialog();
				   }
				});
			});
		}
		
		var deleteRowIndex = null;
		var deleteItemId = null;
		function deleteData()
		{
			if( deleteItemId != null)
			{
			require(["dojo/request" , "dijit/registry",
				"dijit/Dialog", "dojox/grid/EnhancedGrid"], function (request, registry, Dialog, EnhancedGrid){
				var product = new Object();
				product.id = deleteItemId;
				
				dojo.xhrPost({
				   url : "http://localhost:8083/ticket-manager/product/delete.do",
				   postData: dojo.toJson(product),
				   handleAs: "json",
				   headers : {
						"Content-Type" : "application/json; charset=UTF-8"
				   },
				   load: function(response,ioargs) {
						alert('success');
						hideDeleteDialog();
						registry.byId("grid").removeSelectedRows();
				   },
				   error : function(response,ioargs) {
						alert('error');
						hideDeleteDialog();
				   }
				});
			});
			}
		}
		
		function createProduct()
		{
			require(["dojo/request" , "dijit/registry",
				"dijit/Dialog", "dojox/grid/EnhancedGrid"], function(request, registry, Dialog, EnhancedGrid){
				
				var product = new Object();
			
				product.id = registry.byId("uf_id").get("value");
				product.code = registry.byId("uf_code").get("value");
				product.name = registry.byId("uf_name").get("value");
				product.amount = registry.byId("uf_amount").get("value");
				product.price = registry.byId("uf_price").get("value");
				product.isNew = registry.byId("uf_isNew").get("value") == "on" ? true : false;
				product.category = registry.byId("uf_category").get("value");
				product.createDate = registry.byId("uf_createDate").get("value");
				
				
				dojo.xhrPost({
				   url : "http://localhost:8083/ticket-manager/product/create.do",
				   postData: dojo.toJson(product),
				   handleAs: "json",
				   headers : {
						"Content-Type" : "application/json; charset=UTF-8"
				   },
				   load: function(response, ioargs) {
						alert('success');
						hideFormDialog();
				   },
				   error : function(response, ioargs) {
						alert('error');
						hideFormDialog();
				   }
				});
			});
		}
</script>
</head>
<body class="claro">
    <div id="gridDiv"></div>
	
	<div id="hello"> Hello World!</div>
	<div class="dijitHidden">
	
		<div data-dojo-type="dijit/Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="terms">
				<p><strong>Please agree to the following terms and conditions:</strong></p>
				<br />
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:updateData">Update</button>
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:hideDialog">I Don't Agree</button>
		</div>
		
		<div data-dojo-type="dijit/Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="deleteDialog">
				<p><strong>Please agree to the following terms and conditions:</strong></p>
				<br />
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:deleteData">Delete</button>
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:hideDeleteDialog">I Don't Agree</button>
		</div>
		
		<div data-dojo-type="dijit/Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="updateForm">
			<form>
				<label for="id">Id:</label>
				<input type="text" name="id" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true, readOnly: true" id="uf_id" />
				<br /><br />
				<label for="code">Code:</label>
				<input type="text" name="code" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="uf_code" />
				<br /> <br />
				<label for="name">Name:</label>
				<input type="text" name="name" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, propercase:true" id="uf_name" />
				<br /><br />
				<label for="amount">Amount:</label>
				<input type="text" name="amount" data-dojo-type="dijit/form/NumberTextBox"  data-dojo-props="constraints:{min:0,max:5000,places:0},
						invalidMessage:'Invalid elevation.'"  id="uf_amount" />
				<br /><br />
				<label for="price">Price:</label>
				<input type="text" name="price"  data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="" id="uf_price" />
				<br /><br />
				<label for="isNew">IsNew:</label>
				<input type="text" name="isNew" data-dojo-type="dijit/form/CheckBox" data-dojo-props="" id="uf_isNew" />
				<br /><br />
				<label for="category">Category:</label>						
				<select id="uf_category" name="category" data-dojo-type="dijit/form/ComboBox"
							data-dojo-props="value: '', placeHolder: 'Select a State'">
					<option value="grenn tea">grenn tea</option>
					<option value="hat">hat</option>
					<option value="car">car</option>
					<option value="book">book</option>
					<option value="ice scream">ice scream</option>
				</select>
				<br /><br />
				<label for="createDate">CreateDate:</label>
				<input type="text" name="createDate"  data-dojo-type="dijit/form/DateTextBox" data-dojo-props="" id="uf_createDate" />
				<br /><br />
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:updateFromDateToServer">Update </button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:hideFormDialog">Close</button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button data-dojo-type="dijit/form/Button" data-dojo-props="onClick:createProduct">Create</button>
			</form>
		</div>
	</div>
</body>
</html>